<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
        }
    </style>
</head>
<body>

<section>
    <h1>窗外的麻雀，在电线杆上多嘴</h1>
    <h2>你说这一句，很有夏天的感觉</h2>
    <h3>手中的铅笔，在纸上来来回回</h3>
    <h4>我用几行字</h4>
    <h5>形容你</h5>
    <h6>是我的谁</h6>
    <hr/>

    <div class="h1">秋刀鱼的滋味，猫跟你都想了解</div>
    <div class="h2">初恋的香味就这样被我们寻回</div>
    <div class="h3">那温暖的阳光</div>
    <div class="h4">像刚摘的鲜艳草莓</div>
    <div class="h5">你说你舍不得吃掉</div>
    <div class="h6">这一种感觉</div>
    <hr/>

    <h1>金箍棒<small> 龚琳娜</small></h1>
    <h6>七里香<span class="small"> 周杰伦</span></h6>
</section>

<section>
    <p class="lead">枯藤老树昏鸦</p>
    <p class="lead">小桥流水人家</p>
    <p>古道西风瘦马</p>
    <p>夕阳西下</p>
    <p>断肠人在天涯</p>
    <hr/>

    <p class="text-left">左边对齐</p>
    <p class="text-right">右边对齐</p>
    <p class="text-center">居中</p>
    <hr/>

    <p style="border: 2px solid blue; width: 10px">
        换行换行换行换行
    </p>

    <p style="border: 2px solid blue; width: 10px" class="text-nowrap">
        不换行不换行不换行
    </p>
    <hr/>

    <p class="text-lowercase">字母小写 Mr.Joe</p>
    <p class="text-uppercase">字母大写 Mr.Joe</p>
    <p class="text-capitalize">首字母大写 mr joe</p>
</section>

<section>
    <mark>荧光标记</mark>
    <span class="mark">荧光标记</span>
</section>

<section>
    <span>我是正常字号</span>
    <span class="small">我变小了</span>
    <small>我也变小了</small>
</section>

<section>
    <address>地址标签</address>
</section>

<section>
    <blockquote>
        <p>引用标签</p>
    </blockquote>
    <hr/>

    <blockquote class="blockquote-reverse">
        <p>引用标签</p>
    </blockquote>
    <hr/>

    <blockquote>
        <p>引用标签中的内容</p>
        <footer>引用来源1</footer>
        <small>引用来源2</small>
    </blockquote>
</section>

<section>
    <ul class="list-unstyled">
        <li>千里黄云白日曛</li>
        <li>北风吹雁雪纷纷</li>
        <li>莫愁前路无知己</li>
        <li>
            <ol class="list-unstyled">
                <li>天下谁人</li>
                <li>不识君</li>
            </ol>
        </li>
    </ul>
    <hr/>

    <ul class="list-inline">
        <li>中</li>
        <li>国</li>
        <li>人</li>
        <li>民</li>
    </ul>
    <hr/>

    <ul class="list-group" style="width:300px; margin: auto;">
        <li class="list-group-item">朝辞白帝彩云间</li>
        <li class="list-group-item">千里江陵一日还</li>
        <li class="list-group-item">两岸猿声啼不住</li>
        <li class="list-group-item">轻舟已过万重山</li>
    </ul>
</section>

<script src="../../jquery/jquery-3.2.1.min.js"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>